<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>parcel打包ts代码</title>
</head>
<body>
    
</body>
</html>
<script>
    //用的有两种解决方案Webpack和Parcel。webpack  这几年Parcel也开始崛起 如何使用Parcel来打包TypeScript代码。
    
//建立一个新项目    (同11XXX.html一样)  
    /*
    重新建立一个项目TSTest,在桌面新建立一个文件夹，然后在VSCode中打开。
    打开终端，输入npm init -y,创建package.json文件
    在终端中输入tsc --init,创建tsconfig.json文件
    修改tsconfig.json配置rootDir和outDir.
    新建src文件夹，在里边建立index.html,page.ts文件
    编写index.html文件，并引入page.ts文件
    编写page.ts文件。
    */

    //index.html代码如下 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="./page.ts"></script>
        <title>Document</title>
    </head>
    <body></body>
    </html>

    //page.ts 文件代码：
    const teacher: string = "常东东";
    console.log(teacher);
    //至此 时候我们并不能正常的预览出效果，我们需要Parcel的帮忙。


//Parcel安装和使用  
    //arcel 可以通过npm或者yarn来进行安装，
    yarn add --dev parcel@next
    //安装好以后，打开package.json文件，版本不一样，操作可能会稍有不同。
    //修改package.json里边的代码。
    {
        "scripts": {
        "test": "parcel ./src/index.html"
        },
    }
    //这个意思 使用parcel对index.html进行一个编译
    //然后打开终端输入yarn test,这时候终端会给出一个地址http://localhost:1234,把地址放到浏览器上，可以看到浏览器的控制台会输出 常东东 
    //这说明Parcel会自动对index.html中引入的TypeScript文件进行编译，然后打包好后，就可以直接使用了。



    //webpack  打包ts https://blog.csdn.net/Riona_cheng/article/details/100586451












</script>